<template>
  <div class="list">
    <div class="list_content">
      <div class="header">
        <div class="title"><span></span>问题反馈</div>
      </div>
      <div class="search_box flex space_between">
        <div class="search">
          <a-input v-model:value="problemState.form.keyword" placeholder="请输入关键词搜素">
            <template #suffix>
              <SearchOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
          <a-button @click="seach" type="primary">查询</a-button>
        </div>
        &nbsp;
        <div class="group_button">
          <a-button @click="handleAdd" type="primary">新增</a-button>
        </div>
      </div>
      <a-table :scroll="{ x: 0, y: problemState.tableHeight }" :data-source="problemState.tableData"
        :columns="problemState.tableColumns" :pagination="problemState.pagination" size="small">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">
            <span>{{ index + 1 }}</span>
          </template>
          <template v-if="column.key === 'state'">
            <span>{{ record.state == 0 ? "未处理" : "已处理" }}</span>
          </template>
          <template v-if="column.key === 'system'">
            <span>{{ record.system == 0 ? "打印机移动端" : "打印工作站" }}</span>
          </template>
          <template v-if="column.key === 'caozuo'">
            <a @click="handleDetails(record.id)">查看详情</a>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import api from '@renderer/api/problem'
import { message, Modal, Empty } from 'ant-design-vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import column from './js/column'
// export default {
//   name: 'List',
//   data() {
//     return {
//       keyword: '',
//       tableColumns: column.tableColumns,
//       tableData:[{
//             key: '2',
//             name: '胡彦祖',
//             age: 42,
//             address: '西湖区湖底公园1号'}],
//       tableHeight: document.body.clientHeight - 406,
//       pagination: {
//         total: 0,
//         current: 1,
//         pageSize: 10,
//         defaultPageSize: 10,
//         showTotal: total => `共 ${total} 条数据`,
//         showSizeChanger: true,
//         pageSizeOptions: ['10', '15', '20'],
//         onChange: (current) => {
//           this.pagination.current = current;
//           this.getList();
//         },
//         onShowSizeChange: (current, pageSize) => {
//           this.pagination.pageSize = pageSize;
//           this.getList();
//         }
//       },
//     }
//   },
//   components: {
//     SearchOutlined,
//   },
//   created() {
//     window.addEventListener('resize', this.setTableheight);
//     this.getList();
//   },
//   methods: {
//     setTableheight() {
//       this.tableHeight = document.body.clientHeight - 406;
//     },
//     // 获取列表
//     getList() {
//       const postData = {
//         system: "1",
//         pageIndex: this.pagination.current,
//         pageSize: this.pagination.pageSize,
//         keyword: this.keyword
//       };
//       api.getProblemList(postData).then(res => {
//         this.tableData = res.data.list.filter(item=> !item.isHotspot);;
//         this.pagination.total = res.data.total;
//       })
//     },
//     // 新增
//     handleAdd() {
//       this.$router.push({
//         path: "/list/add", query: {
//           ishot: false
//         }
//       })
//     },
//     // 详情
//     handleDetails(id) {
//       this.$router.push(`/list/details/${id}`)
//     }
//   },
// }
const problemState = reactive({
  form: {
    pageNum: 1,
    pageSize: 10,
    keyword: '',
    printerFid: '',
    system: '1'
  },
  pagination: {
      current: 1,
      pageSize: 10,
      total: 0,
      defaultPageSize: 10,
      showQuickJumper: false,
      showSizeChanger: false,
      showTotal: (total) => {
        return `共 ${total} 条数据`;
      },
      pageSizeOptions: ["10", "15", "20"],
      onChange: (current) => {
        problemState.pagination.current = current
        problemState.form.pageNum = current
        seach()
      },
      onShowSizeChange: (pageIndex, pageSize) => {
        problemState.pagination.pageSize = pageSize
        problemState.form.pageSize = pageSize
        seach()
      }
  },
  tableHeight: document.body.clientHeight - 200,
  tableColumns: column.tableColumns,
  tableData: []
})
const seach = () => {
  window.api.fetchData(api.getProblemList(JSON.parse(JSON.stringify(problemState.form)))).then((res) => {
      if (res.code === 200) {
        problemState.tableData = res.rows.filter((item) => !item.isHotspot)
        problemState.pagination.total = res.total
      } else {
        message.error(res.data)
      }
    })
}
const handleDetails = (id) => {
  router.push(`/list/details/${id}`)
}
const handleAdd = () => {
  router.push({
    path: `/list/add`,
    query: {
      ishot: false
    }
  })
}
onMounted(() => {
  seach()
})

</script>
<style lang="scss" scope>
@use './css/list.scss' as vars;
</style>
